<html>
    <head>
        <script src="{{$core_js}}/jquery-1.4.2.min.js" type="text/javascript"></script>
        <link rel="stylesheet" type="text/css" href="{{$core_js}}/datatables/css/demo_table.css" />
        <script src="{{$core_js}}/datatables/jquery.dataTables.min.js" type="text/javascript"></script>
        <link rel="stylesheet" type="text/css" href="{{$core_js}}/ui/1.8.5/css/ui-lightness/jquery-ui-1.8.5.custom.css" />
        <script src="{{$core_js}}/ui/1.8.5/jquery-ui-1.8.5.custom.min.js" type="text/javascript"></script>

        <style>
            input{
                border:1px solid black;
            }

            #log_table th{cursor: pointer}
            #log_table_wrapper{
                font-family: monospace;
                font-size: 14px;
            }
            #log_table_wrapper{
                width: 100%;
                margin: 0px;
                padding: 2px;


            }

            #params{
                width: 98%;
                margin: 10px;
                font-family: monospace;
                font-size: 14px;

            }
            tr.odd {
                background-color:#F7F7F7;
            }

        </style>
    </head>
    <body>
        <div id="dialog" title="Logged Message Body">
            <pre id="dialog_p"></pre>
        </div>

        <h1 style="font-family:monospace ; font-size: 14px; background: #3C295F;color: white">System Log Console</h1>
        <div id="params">
            <fieldset>
                <legend onclick="$('#filters').toggle();" style="cursor: pointer">Filters</legend>
                <table id="filters">
                    <tr>
                        <td>Modules :</td>
                        <td><select id="select_module" onchange="redraw()"> <option></option> {{foreach from=$modules item=m}} <option value="{{$m->name}}" >{{$m->name}}</option> {{/foreach}}</select></td>
                    </tr>
                    <tr>
                        <td>Types :</td>
                        <td><select id="select_type" onchange="redraw()">
                                <option></option>
                                <option>INFO</option>
                                <option>WARNING</option>
                                <option>ERROR</option>
                            </select></td>
                    </tr>
                    <tr>
                        <td>Group (=):</td>
                        <td><input type="text" id="txt_group" onkeypress="if(event.keyCode==13) redraw();" /> </td>
                    </tr>
                    <tr>
                        <td>Message (%):</td>
                        <td><input type="text" id="txt_message" onkeypress="if(event.keyCode==13) redraw();"/> </td>
                    </tr>
                    <tr>
                        <td colspan="2" align="right">
                            <input type="button" onclick="reset_filters()" value="Reset"  />
                            &nbsp;&nbsp;&nbsp;
                            <input type="button" onclick="delete_log()" value="Delete"  />
                            <input type="button" onclick="redraw()" value="Search"  />

                        </td>
                    </tr>
                </table>

            </fieldset>

        </div>
        <div >
            <table class="display" cellpadding="2" cellspacing="0" border="0" id="log_table" width="100%" style="border:1px solid gray">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th >Time Stamp</th>
                        <th>Module</th>
                        <th>Type</th>
                        <th>Group</th>
                        <th>Message</th>
                        <th>Class</th>
                        <th>Function</th>
                        <th>Line</th>
                        <th >File</th>
                    </tr>
                </thead>
                <tbody>
                    
                </tbody>


            </table>
        </div>
        <script>
            var dtable;
            var dialog;
            function redraw(){
                dtable.fnDraw();
            }
            function showMore(id){
                txt =  $("#"+id).html();
                $("#dialog_p").html(txt);
                dialog.dialog('open');
                
            }
            function init_dialog(){
                dialog =  $( "#dialog" ).dialog(
                {
                    autoOpen: false ,
                    width: 800,
                    height:500,
                    modal:true
                });
            }
            $(document).ready(function() {
                init_dialog();
                dtable =
                    $('#log_table').dataTable({
                    "aoColumns": [
                        {"sClass":"center"},
                        null,
                        {
                            "fnRender": function ( oObj ) {
                                txt = oObj.aData[2];
                                return "<span style='color:#7F0059;font-weight:bold'>"+txt+" </span>" ;
                            }
                        },
                        {
                            "fnRender": function ( oObj ) {
                                if(oObj.aData[3]=="INFO"){
                                    return "<img width='20' src='{{$core_images}}/common/info.png' title='INFO'/>" ;
                                }else if(oObj.aData[3]=="WARNING"){
                                    return "<img width='20' src='{{$core_images}}/common/warning.png' title='WARNING'/>" ;
                                }else if(oObj.aData[3]=="ERROR"){
                                    return "<img width='20' src='{{$core_images}}/common/error.png' title='ERROR'/>" ;
                                }
                                           

                            },
                            "sClass":"center"

                        },
                        {
                            "fnRender": function ( oObj ) {
                                txt = oObj.aData[4];
                                return "<span style='color:#006F6D;font-weight:bold'>"+txt+" </span>" ;
                            }
                                        
                        },
                        {
                            "fnRender": function ( oObj ) {
                                txt = null;
                                if(oObj.aData[5].length>40){
                                    txt =  "<a href='#' onClick=\"showMore('"+oObj.aData[0]+"_msg')\">Click to see..</a><div style='display:none' id='"+oObj.aData[0]+"_msg'> "+oObj.aData[5]+"</div>";
                                }else{
                                    txt = oObj.aData[5];
                                }
                                return "<span style='color:#5F4E00;font-weight:bold'>"+txt+" </span>" ;
                            },
                            "sWidth":"30%"
                        },
                        {
                            "fnRender": function ( oObj ) {
                                txt = oObj.aData[6]+"{..}";
                                return "<span style='color:#1F7F00;font-weight:bold'>"+txt+" </span>" ;

                            }
                        },
                        {
                            "fnRender": function ( oObj ) {
                                txt = oObj.aData[7]+"()";
                                return "<span style='color:#61007F;font-weight:bold'>"+txt+" </span>" ;

                            }
                        },
                        {
                            "fnRender": function ( oObj ) {
                                txt = oObj.aData[8];
                                return "<span style='color:#9F1A00;font-weight:bold'>"+txt+" </span>" ;

                            },
                            "sClass":"center"
                        },

                        {
                            "fnRender": function ( oObj ) {
                                return "<img width='20' src='{{$core_images}}/common/file.png' title='"+oObj.aData[9]+"'/>" ;

                            },
                            "sClass":"center"
                                                                               
                        }

                    ],
                    "bFilter": false,
                    "bPaginate": true,
                    "fnDrawCallback" : function(){
                    },
                    "sPaginationType": "full_numbers",
                    "bProcessing": true,
                    "bServerSide": true,
                    "sAjaxSource": "{{$base_index_url}}/core/sys_log_viewer/get_data",
                    "fnServerData": function ( sSource, aoData, fnCallback ) {
                        aoData.push({"name": "module_name","value": $("#select_module").val()});
                        aoData.push({"name": "type","value": $("#select_type").val()});
                        aoData.push({"name": "message","value": $("#txt_message").val()});
                        aoData.push({"name": "group","value": $("#txt_group").val()});
                        $.ajax( {
                            "dataType": 'json',
                            "type": "POST",
                            "url": sSource,
                            "data": aoData,
                            "success": fnCallback
                        } );
                    }
                });
            } );

            function reset_filters(){
                $("#txt_group").val("");
                $("#txt_message").val("");
                $("#select_module").val("");
                $("#select_type").val("");
                redraw();
            }

            function delete_log(){
                if(confirm("This will delete log(s) matach(es) current filter(s)..you sure?")){
                    $.ajax({
                        type:"POST",
                        dataType:'json',
                        data:"groups="+$("#txt_group").val()+"&message="+$("#txt_message").val()+"&module_name="+$("#select_module").val()+"&type="+$("#select_type").val(),
                        url: "{{$base_index_url}}/core/sys_log_viewer/delete_log",
                        success: function(data) {

                        },
                        complete :  function(data){
                            redraw();
                        }
                    });
                }
            }
        </script>

    </body>

</html>
